<template>
    <div class="page-menu">

        <div class="page-title">
            <div><a>首页</a>><a>产品中心</a></div>
            <!-- <div>类型查询
                    <select name="cat" id="">
                        <optgroup label="lmerys">
                            <option value="">高岭土</option>
                            <option value="">水洗高岭土</option>
                        </optgroup>
                    </select>  </div>-->

            <div class="product-search">
                <input type="text" class="input-search" placeholder="请输入产品名称"
                 v-model="searchString" v-on:keydown="searchProducts2($event)">
                <button class="search-button iconfont icon-sousuo" v-on:click="searchProducts1()"></button>
            </div>
        </div>
        <div class="product-menu">
            <table class="product-table" border="3">
                <th>序号</th>
                <th>产品名称</th>
                <th>缩略图</th>
                <th>产品类型</th>
                <th>产品简介</th>
                <th>修改时间</th>
                <th>上架状态</th>
                <th>操作</th>
                <tr class="product-table-list" v-for="val1 in searchList">
                    <td>{{ val1.id }}</td>
                    <td>{{ val1.name }}</td>
                    <td>
                    <img v-bind:src="val1.pic" alt="42142">
                    </td>
                    <td>{{ val1.category }}</td>
                    <td>{{ val1.inform }} </td>
                    <td>{{ val1.date }}</td>
                    <td>
                        <div v-bind:style="val1.status ? 'background-color:limegreen' : 'background-color:red'">
                            {{ onsale(val1.status) }}</div>
                    </td>
                    <td>
                        <div>查看详情</div>
                    </td>
                </tr>
            </table>
        </div>

    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

const productList = [
    {
        id: 1, pic: "http://localhost:5173/src/assets/logo.jpg",
        name: "Imerys高岭土", category: "Imerys>高岭土", inform: "asdqwezcasdqwqewee"
        , date: "2025/8/28", status: true
    }, {
        id: 2, pic: "http://localhost:5173/src/assets/logo.jpg",
        name: "Min-U-Gel 400 凹凸棒土", category: "AMI>凹凸棒土", inform: "asdqwezcasdqwqewee"
        , date: "2025/8/28", status: true
    }, {
        id: 3, pic: "http://localhost:5173/src/assets/logo.jpg",
        name: "湖北安琪酵母护肤产品", category: "安琪酵母", inform: "asdqwezcasdqwqewee"
        , date: "2025/8/28", status: true
    }, {
        id: 4, pic: "http://localhost:5173/src/assets/logo.jpg",
        name: "Imerys水洗高岭土", category: "Imerys>水洗高岭土", inform: "asdqwezcasdqwqewee"
        , date: "2025/8/28", status: false
    },{
        id: 5, pic: "http://localhost:5173/src/assets/logo.jpg",
        name: "Orasol金属络合染料", category: "BASF>染料", inform: "asdqwezcasdqwqewee"
        , date: "2025/8/14", status: false
    },
    {
        id: 6, pic: "http://localhost:5173/src/assets/logo.jpg",
        name: "Xfast极速分散颜料", category: "BASF>颜料预制剂", inform: "asdqwezcasdqwqewee"
        , date: "2025/8/14", status: false
    },
    {
        id: 7, pic: "http://localhost:5173/src/assets/logo.jpg",
        name: "Imerys煅烧高岭土", category: "Imerys>煅烧高岭土", inform: "asdqwezcasdqwqewee"
        , date: "2025/8/14", status: true
    }
]

const searchString = ref("");
const searchList = ref([]);

function searchProducts1() {
    searchList.value = [];
    for (let obj of productList) {
        let reg = new RegExp(searchString.value);
        reg.test(obj.name) ? searchList.value.push(obj) : 0;
    }
}
function searchProducts2(e:any){
    if(e.keyCode==13){
        searchProducts1();
    }
}
const onsale: any = computed(() => {
    return (flag: boolean) => {
        return flag == true ? "已上架" : "已下架"
    }
})
onMounted(() => {
    searchList.value = productList
})

</script>

<style scoped lang="scss">
* {
    padding: 0px;
    margin: 0px;
    outline: hidden;
}

table,
tr,
th,
td {
    font-weight: normal;
    border-collapse: collapse;
}

img {
    object-fit: contain;
    object-position: center;
    display: block;
}

input,
button {
    display: block;
    border: none;
    outline: none;
}


.page-menu {
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
    color: black;
    display: flex;
    flex-direction: column;

    .page-title {
        display: flex;
        align-items: center;
        font-size: 22px;
        justify-content: space-between;
        margin: 10px 5px;

        .product-search {
            margin: 0px 50px;
            display: flex;
            height: 30px;
            width: fit-content;
            border: 1px solid black;

            .input-search {
                height: inherit;
                width: 300px;
                font-size: 20px;
            }

            .search-button {
                height: inherit;
                width: 30px;
            }
        }
    }

    .product-menu {
        flex: 1 0 0;
        overflow: scroll;
        padding: 0px 5px;
        font-size: 20px;
    }

    th,
    td {
        padding: 5px 5px;
        overflow: hidden;
    }

    tr:nth-child(2n) {
        background-color: rgb(213, 255, 251);
    }

    .product-table {
        width: 100%;

        .product-table-list {
            text-align: center;
            height: 100px;
            font-size: 16px;

            img {
                width: 100px;
                height: 100px;
                object-fit: cover;
            }

            td:nth-child(1) {
                width: 50px;
            }

            td:nth-child(2) {
                width: 150px;
            }

            td:nth-child(3) {
                width: 100px;
            }

            td:nth-child(4) {
                width: 250px;
            }

            td:nth-child(6) {
                width: 150px;
            }

            td:nth-child(7) {
                width: 150px;

                div {
                    margin: 0 auto;
                    text-align: center;
                    width: fit-content;
                    padding: 5px;
                    color: white;
                    border-radius: 10px;
                }
            }

            td:nth-child(8) {
                width: 200px;

                div {
                    margin: 0px auto 5px;
                    padding: 10px;
                    background-color: blue;
                    border-radius: 10px;
                    color: white;
                    width: fit-content;
                }
            }



        }


    }

}
</style>